@extends('backend.layouts.app')

@section('title', $title = '接口IP绑定')

@section('breadcrumb')
    <a href="">系统设置</a>
    <a href="">用户管理</a>
    <a href="">{{$title}}</a>
@endsection

@section('content')
    <div class="layui-main">

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>{{$title}}</legend>
        </fieldset>

        <form class="layui-form layui-form-pane" method="POST"
              action="{{ route('administrator.user.api_ips.update', Auth::User()->id) }}">
            {{ csrf_field() }}
            <input type="hidden" name="_method" class="mini-hidden" value="PUT">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 60px;">
                <legend style="font-size: 18px">接口IP绑定</legend>
            </fieldset>
            <div class="layui-card">
                <div class="layui-card-header" style="color: #FF5722">接口IP绑定注意信息：</div>
                <div class="layui-card-body" style="color: #FF5722">
                    后台IP绑定最大不能超过{{config('administrator.api_ips_max')}}个
                </div>
            </div>
            <div class="container">
                @if($user->api_ips)
                    @foreach($user->api_ips as $api_ip)
                        <div class="layui-form-item">
                            <div class="layui-input-inline">
                                <input type="text" name="api_ips[]" lay-verify="" placeholder="请输入ip"
                                       autocomplete="off" value="{{$api_ip}}"
                                       class="layui-input">
                            </div>
                            <button class="layui-btn layui-btn-danger sub">删除</button>
                        </div>
                    @endforeach
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <input type="text" name="api_ips[]" lay-verify="" placeholder="请输入ip"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                        <button class="layui-btn add">新增</button>
                    </div>
                @else
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <input type="text" name="api_ips[]" lay-verify="" placeholder="请输入ip"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                        <button class="layui-btn add">新增</button>
                    </div>
                @endif
            </div>

            <div class="layui-form-item">
                {{--<div class="layui-input-block">--}}
                <button class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                {{--</div>--}}
            </div>
        </form>
    </div>
@endsection

@section('scripts')
    <script type="text/html" id="addTemplate">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" name="api_ips[]" lay-verify="" placeholder="请输入ip" autocomplete="off"
                       class="layui-input">
            </div>
            <button class="layui-btn add">新增</button>
        </div>
    </script>

    <script>

        $(".container").on("click", ".add", function (event) {

            event.stopPropagation();
            event.preventDefault();

            var add = $('script[type="text/html"]');

            var addHtml = add.html();

            $(".add").removeClass().addClass("layui-btn layui-btn-danger sub").text("删除");

            $(".container").append(addHtml);
        });

        $(".container").on("click", ".sub", function (event) {
            event.stopPropagation();
            event.preventDefault();
            $(event.currentTarget).parent().remove();

        });
    </script>
@endsection